import { useState } from 'react';
import { getData5 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid } from "@grapecity/wijmo.react.grid";
import { GroupPanel } from "@grapecity/wijmo.react.grid.grouppanel";
import { CollectionView } from '@grapecity/wijmo';

const WijmoH03 = () => {
    const InitData = useReactive({
        init: null
    })

    const [Data, setData] = useState()
    useMount(() => { setData(new CollectionView(getData5(100), { groupDescriptions: ["country", "product"] })) })


    const init = (init) => {
        InitData.init = init
    }

    if (Data) {
        return (
            <div className="Page">

                <GroupPanel
                    initialized={s => {
                        s.hostElement.addEventListener('contextmenu', e => {
                            let groupDescription = s.hitTest(e), cv = s.collectionView;
                            console.log(groupDescription)
                            console.log(cv)
                            if (groupDescription) {
                                this.setState({ groupIndex: cv.groupDescriptions.indexOf(groupDescription) });
                                this.state.contextMenu.show(e);
                            }
                            e.preventDefault();
                        });
                    }}
                    className="group-panel"
                    grid={InitData.init}
                    placeholder="将列拖动到此处以创建组" />

                <FlexGrid initialized={init} itemsSource={Data} />
                <div>初始化属性设置 - 无法将自定义属性定义到右键菜单</div>
            </div>
        )
    }

};

export default WijmoH03